<template id="cropperToolTpl">
    <!-- vueCropper 剪裁图片实现-->
    <el-dialog title="图片剪裁" :visible.sync="dialogVisible" append-to-body width="80%">
        <div class="cropper-content">
            <el-row>
                <el-col :span="18">
                    <div class="cropper" :style="style.cropper">
                        <vue-cropper ref="cropper" :img="option.img" :output-size="option.size"
                            :output-type="option.outputType" :info="true" :full="option.full" :can-move="option.canMove"
                            :can-move-box="option.canMoveBox" :original="option.original" :auto-crop="option.autoCrop"
                            :fixed="option.fixed" :fixed-number="option.fixedNumber" :center-box="option.centerBox"
                            :can-scale="option.canScale" :info-true="option.infoTrue" :fixed-box="option.fixedBox"
                            @real-time="realTime"></vue-cropper>
                    </div>
                </el-col>
                <el-col :span="6">
                    <div :style="previewStyle1">
                        <div :style="previews.div">
                            <img :style="previews.img" :src="previews.url" fit="contain">
                        </div>
                    </div>
                </el-col>
            </el-row>
        </div>
        <div slot="footer" class="dialog-footer">
            <div style="float: left;">
                <el-button type="primary" @click="rotateImg('left')" size="small">
                    向左旋转</el-button>
                <el-button type="primary" @click="rotateImg('right')" size="small">
                    向右旋转</el-button>
                <el-button type="primary" @click="down('blob')" size="small">
                    下载</el-button>
            </div>
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="finish" :loading="loading">确认</el-button>
        </div>
    </el-dialog>
</template>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="//cdn.jsdelivr.net/npm/vue-cropper@0.4.9/dist/index.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

<script>
    Vue.use(window['vue-cropper'].default.VueCropper)

    let cropperTool = {
        data() {
            return {
                option: {
                    img: '', // 裁剪图片的地址
                    info: true, // 裁剪框的大小信息
                    outputSize: 1, // 裁剪生成图片的质量
                    outputType: 'png', // 裁剪生成图片的格式
                    canScale: true, // 图片是否允许滚轮缩放
                    autoCrop: true, // 是否默认生成截图框
                    // autoCropWidth: 300, // 默认生成截图框宽度
                    // autoCropHeight: 200, // 默认生成截图框高度
                    fixedBox: false, // 固定截图框大小 不允许改变
                    fixed: false, // 是否开启截图框宽高固定比例
                    fixedNumber: [1, 1], // 截图框的宽高比例
                    full: true, // 是否输出原图比例的截图
                    canMoveBox: true, // 截图框能否拖动
                    original: false, // 上传图片按照原始比例渲染
                    centerBox: false, // 截图框是否被限制在图片里面
                    infoTrue: true // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
                },
                loading: false,
                previews: {},
                previewStyle1: {},
                previewStyle2: {},
                dialogVisible: false,
                style: {
                    cropper: { 'text-align': 'center', 'width': 'auto', 'height': '300px' }
                }
            }
        },
        template: '#cropperToolTpl',
        methods: {
            // 点击裁剪，这一步是可以拿到处理后的地址
            finish() {
                let that = this;
                this.$refs.cropper.getCropBlob((data) => {
                    let reader = new FileReader();

                    reader.readAsDataURL(data);
                    reader.onload = function (e) {
                        that.$emit('change', { blob: data, base64: reader.result });
                        that.dialogVisible = false;
                        this.$refs.cropper.clearCrop();
                    };


                })
            },

            // 图片预览
            realTime(data) {
                var previews = data;
                this.previewStyle1 = {
                    width: previews.w + "px",
                    height: previews.h + "px",
                    overflow: "hidden",
                    margin: "0px auto",
                    zoom: 150 / previews.w,
                    border: '1px solid #ccc'
                };

                this.previews = data;
            },

            // 旋转图片
            rotateImg(type) {
                if (type === 'left') {
                    this.$refs.cropper.rotateLeft()
                } else {
                    this.$refs.cropper.rotateRight()
                }
            },

            // 下载图片
            down(type) {
                var aLink = document.createElement('a')
                aLink.download = '截图'
                // 输出
                if (type === 'blob') {
                    this.$refs.cropper.getCropBlob((data) => {
                        this.downImg = window.URL.createObjectURL(data)
                        aLink.href = window.URL.createObjectURL(data)
                        aLink.click()
                    })
                } else {
                    this.$refs.cropper.getCropData((data) => {
                        this.downImg = data
                        aLink.href = data
                        aLink.click()
                    })
                }
            },

            // 显示对话框
            isOpen(img) {
                this.setImg(img);
                this.$nextTick(function () {
                    this.dialogVisible = true;
                });

            },
            // 设置要裁切的图片 支持 Blob 和 Base64 格式
            setImg(img) {
                let that = this;
                if (img instanceof Blob) {
                    let reader = new FileReader();
                    reader.readAsDataURL(img);

                    reader.onload = function (e) {
                        that.option.img = reader.result;
                    };

                } else {
                    this.option.img = img;
                }

            }
        }
    }
</script>